import useToggle, { ToggleStatus } from "./useToggle";
import { useState } from "react";

enum TogglePopupBy {
  Click = "Click",
  Hover = "Hover",
}

interface UsePopupResult {
  opened: boolean;
  closeOnHover: () => void;
  openOnHover: () => void;
  toggleOnClick: () => void;
}

const useTogglePopup = (): UsePopupResult => {
  const { opened, toggle } = useToggle();
  const [togglePopupBy, setTooglePopupBy] = useState(TogglePopupBy.Hover);

  const toggleOnClick = (): void => {
    switch (togglePopupBy) {
      case TogglePopupBy.Click:
        opened && setTooglePopupBy(TogglePopupBy.Hover);
        toggle(ToggleStatus.Toggle);
        break;
      case TogglePopupBy.Hover:
        setTooglePopupBy(TogglePopupBy.Click);
        toggle(ToggleStatus.Open);
        break;
    }
  };

  const openOnHover = (): void => {
    togglePopupBy === TogglePopupBy.Hover && toggle(ToggleStatus.Open);
  };

  const closeOnHover = (): void => {
    togglePopupBy === TogglePopupBy.Hover && toggle(ToggleStatus.Close);
  };

  return {
    opened,
    closeOnHover,
    openOnHover,
    toggleOnClick,
  };
};

export default useTogglePopup;
